<template>
  <span @click="boxSearch"
    ><el-icon><FullScreen /></el-icon>查询事件</span
  >
  <Teleport to="body">
    <div class="modal" v-if="openPan">
      <SearchedData @closeTable="closeTable()" />
      <div class="mask" @click="openPan = false"></div>
    </div>
  </Teleport>
</template>
<script setup>
import { FullScreen } from "@element-plus/icons-vue";
import { ref, getCurrentInstance, onMounted } from "vue";
import { drawGraph } from "@/zondyTools/ol-api/olDraw";
import { Query } from "@/zondyTools/mapgis-api/Query";
import SearchedData from "./component/SearchedData.vue";
import location from "@/assets/img/location.png";
import { useSearchedAccidentsStore } from "@/stores/serachedAccidents";
const { addAccidentSearch, resetData } = useSearchedAccidentsStore();
const { proxy } = getCurrentInstance();
let $map = ref(null);
let drawAccident = ref(null);
let openPan = ref(false);

/* 标注图层 */
const localIcon = new ol.style.Icon({
  anchor: [0.7, 0],
  anchorOrigin: "bottom-left",
  anchorXUnits: "fraction",
  anchorYUnits: "pixels",
  //offsetOrigin: "bottom-left",
  offset:[-10,-10],
  //图标缩放比例
  scale: 0.1,
  //透明度
  opacity: 0.75,
  //图标的url
  src: location,
});
localIcon.load();
const labelSource = new ol.source.Vector();
const labelLayer = new ol.layer.Vector({
  source: labelSource,
  id: "box-label-layer",
  style: new ol.style.Style({
    image: localIcon,
  }),
});

/* 画笔图层 */
const source = new ol.source.Vector();
const layer = new ol.layer.Vector({
  source: source,
  id: "search-layer",
});

onMounted(() => {
  $map.value = proxy.$map;
  $map.value.addLayer(layer);
  $map.value.addLayer(labelLayer);
  drawAccident.value = drawGraph({
    type: "Box",
    source: source,
  });
});

const boxSearch = async () => {
  $map.value.addInteraction(drawAccident.value);
  drawAccident.value.on("drawend", (evt) => {
    $map.value.removeInteraction(drawAccident.value);
    /* 获取矩形范围 */
    const extent = evt.feature.getGeometry().getExtent();
    //console.log(extent)
    /* 查询矩形范围内的要素 */
    const boxExtent = new ol.Feature({
      geometry: new ol.geom.Polygon([
        [
          [extent[0], extent[1]],
          [extent[2], extent[1]],
          [extent[2], extent[3]],
          [extent[0], extent[3]],
          [extent[0], extent[1]],
        ],
      ]),
    });
    const service = {
      name: "guanggu",
      layerId: 2,
    };
    /* 地图文档查询回调函数 */
    const success = async (res) => {
      // 清空画布和标注
      source.clear();
      labelSource.clear();

      // 处理查询结果
      res.forEach((item) => {
        //将结果转换为openlayers的feature,并添加到labelSource中
        const feature = new ol.Feature({
          geometry: new ol.geom.Point(item.getGeometry().flatCoordinates),
        });

        feature.setProperties(item.values_.values_);
        labelSource.addFeature(feature);

        /* 将查询结果同步商店 */
        addAccidentSearch({
          coord: item.getGeometry().flatCoordinates,
          attr: item.values_.values_,
        });
      });
    };
    /* 输入矩形范围进行地图文档查询 */
    Query.queryByGeometry({
      service,
      geometry: boxExtent.getGeometry(),
      success,
    });
    /* 打开查询结果弹窗 */
    openPan.value = true;
  });
};

const closeTable = () => {
  openPan.value = false;
  resetData();
  /* 清除标注图层 */
  labelSource.clear();
};
</script>
<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}
</style>
